<style lang="less">
@import "@/styles/table-common.less";
.btn-box {
  // padding: 10px 12px 10px 0;
  height: 32px;
  display: flex;
  align-items: center;
  span {
    margin-left: 15px;
  }
}
.detail-modal {
  .form {
    div {
      display: flex;
      margin-bottom: 10px;
      span {
        width: 130px;
      }
      input {
        flex: 1;
        border: 1px solid #e8eaec;
        outline: none;
        text-indent: 16px;
        color: #515a6e;
      }
    }
  }
  .refund-num {
    margin-top: 15px;
  }
}
</style> 
<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="100">
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
          <FormItem label="时间">
            <DatePicker
              :options="options"
              v-model="selectDate"
              type="daterange"
              format="yyyy-MM-dd"
              clearable
              @on-change="selectDateRange"
              placeholder="选择起始时间"
              style="width: 200px"
            ></DatePicker>
          </FormItem>

          <FormItem label="企业名称">
            <Input
              type="text"
              v-model="searchForm.expenseCompanyName"
              clearable
              placeholder="请输入"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="会议室名称">
            <Select
              v-model="searchForm.productId"
              transfer
              placeholder="请选择"
              style="width: 200px"
            >
              <Option
                v-for="item in meetRoomList"
                :key="item.id"
                :value="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem>

          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Row>
      </Form>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
      >
        <!-- <template slot-scope="{ row }" slot="print">{{ row.print.serialNo }}</template> -->
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <div style="display: flex; margin-top: 20px">
      <Card style="width: 500px; margin-right: 15px">
        <div id="shareRoomChart" style="width: 100%; height: 400px"></div>
      </Card>
      <Card style="flex: 1">
        <div id="shareRoomColumsChart" style="width: 100%; height: 400px"></div>
      </Card>
    </div>
    <Modal v-model="modal" title="详情" @on-ok="ok" @on-cancel="cancel">
      <div class="detail-modal">
        <div class="form">
          <div>
            <span>订单编号</span
            ><input type="text" readonly :value="detailData.orderNo" />
          </div>
          <div>
            <span>发起人姓名</span
            ><input type="text" readonly :value="detailData.realName" />
          </div>
          <div>
            <span>发起时间</span
            ><input type="text" readonly :value="detailData.createTime" />
          </div>
          <div>
            <span>取消原因</span
            ><input
              type="text"
              readonly
              :value="detailData.refundReasonWapExplain"
            />
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import {
  getColumnStatistic,
  getChartStatistic,
  getAllByTypeData,
  getOrderStatisticByCondition,
} from "@/api/index";
import { shortcuts } from "@/libs/shortcuts";
export default {
  name: "user-manage",

  data() {
    return {
      orderType: 3,
      message: "",
      showUser: false,
      loading: true,
      selectDate: "",
      openSearch: true,
      options: {
        shortcuts: shortcuts,
      },
      meetRoomList: [],
      orderTypeList: [
        { id: "0", title: "已取消" },
        { id: "1", title: "已完成" },
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: "10",
        // sort: "createTime",
        // order: "desc",
      },
      columns: [
        {
          title: "统计日期",
          key: "orderNo",
          minWidth: 220,
          align: "center",
          fixed: "left",
          render: (h, params) => {
            return h("div", [
              h("div", params.row.startDate),
              h("div", "-----------"),
              h("div", params.row.endDate),
            ]);
          },
        },
        {
          title: "会议室名称",
          key: "productName",
          minWidth: 220,
          align: "center",
        },
        {
          title: "企业名称",
          key: "productCompanyName",
          width: 180,
          align: "center",
          // render: (h, params) => {
          //   return h("span", params.row.meetRoom.title);
          // },
        },
        {
          title: "订单总数",
          key: "orderNum",
          width: 120,
          align: "center",
          // render: (h, params) => {
          //   return h("span", params.row.meetRoom.equipSerial);
          // },
        },
        {
          title: "完成数",
          key: "completeNum",
          width: 120,
          align: "center",
        },
        {
          title: "支付积分（企业共享会议分）",
          key: "companyMeetIntegral",
          width: 120,
          align: "center",
        },
        {
          title: "支付积分（个人共享会议分）",
          key: "meetIntegral",
          width: 120,
          align: "center",
        },
        {
          title: "支付个人积分",
          key: "integral",
          width: 120,
          align: "center",
        },
        {
          title: "微信支付",
          key: "weChatPay",
          width: 120,
          align: "center",
        },
        {
          title: "余额支付",
          key: "yuePay",
          width: 120,
          align: "center",
        },
        {
          title: "支付总额",
          key: "totalPay",
          width: 120,
          align: "center",
        },
        {
          title: "取消数",
          key: "cancelNum",
          width: 120,
          align: "center",
        },
      ],
      modal: false,
      columns1: [
        {
          title: "打印机编号",
          key: "serialNo",
          align: "center",
        },
        {
          title: "打印名称",
          key: "title",
          align: "center",
        },
        {
          title: "打印页数",
          key: "nums",
          align: "center",
        },
        {
          title: "*元，每页",
          key: "price",
          align: "center",
        },
      ],
      data: [],
      detailData: [],
    };
  },
  methods: {
    initcolumeCharts(data) {
      var chartDom = document.getElementById("shareRoomColumsChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [ "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            // name: "数据",
            type: "bar",
            barWidth: "60%",
            data: [ data.one,
              data.two,
              data.three,
              data.four,
              data.five,
              data.six,
              data.seven,
              data.eight,
              data.ten,
              data.eleven,
              data.twelve],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initchart(data) {
      var chartDom = document.getElementById("shareRoomChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "支付",
            type: "pie",
            radius: "50%",
            data: [
              { value: data.integral, name: "个人积分" },
              { value: data.companyIntegral, name: "企业积分" },
              { value: data.weChatPay, name: "微信支付" },
              { value: data.yuePay, name: "余额支付" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    init() {
      getChartStatistic({ orderType: this.orderType }).then((res) => {
        if (res.success) {
          this.initchart(res.result);
        }
      });
      getColumnStatistic({ orderType: this.orderType }).then((res) => {
        if (res.success) {
          this.initcolumeCharts(res.result);
        }
      });
      getAllByTypeData("scMeetRoom").then((res) => {
        if (res.success) {
          this.meetRoomList = res.result;
        }
      });
      this.searchForm.orderType = this.orderType;
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true;
      getOrderStatisticByCondition(this.searchForm).then((res) => {
        this.loading = false;
        console.log(res.message);
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },

    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      console.log(this.searchForm);
      // return
      this.getDataList();
    },
    handleReset() {
      this.selectDate = "";

      // 重新加载数据
      this.searchForm = {
        orderType: this.orderType,
        pageNumber: 1,
        pageSize: 10,
      };
      this.getDataList();
    },
  },
  created() {},
  mounted() {
    // 计算高度

    this.init();
  },
};
</script>